/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230919
* @version:0.1.4
* @type:interface
* @description:
* # SDialog
* SDialogs are used to confirm messages or events and display text
* ## properties
* - in property <Themes> theme : Dialog mask theme
* - in property <Themes> cancel-btn-theme : Dialog cancel button theme
* - in property <Themes> confirm-btn-theme : Dialog confirm button theme
* - in property <string> cancel-btn-text : Dialog cancel button text
* - in property <string> confirm-btn-text : Dialog confirm button text
* - in-out property <bool> is-show: Dialog is show or not
* - in property <percent> mask-opacity : Dialog mask opacity
* - in property <length> spacing : Dialog spacing
* - in property <int> font-weight : Dialog text font weight
* - in property <length> font-size: Dialog text font size;
* - in property <brush> font-color : Dialog text font color;
* - in property <bool> font-italic : Dialog text font italic;
* - in property <string> font-family : Dialog text font family;
* - in property <Themes> dialog-theme : Dialog theme 
* - in property <string> dialog-title : Dialog title
* - in property <length> dialog-title-size : Dialog title size
* - in property <string> dialog-details : Dialog detail text
* - in property <float> dialog-height : Dialog height
* - in property <float> dialog-title-height : Dialog title height
* - in property <float> dialog-view-height : Dialog view height
* - in property <float> btn-view-height : Dialog button view height
* - in property <float> dialog-width : Dialog width
* - in property <length> dialog-details-padding-top: Dialog details padding top
* - in property <length> dialog-details-padding-bottom: Dialog details padding bottom
* - in property <length> dialog-details-padding-left: Dialog details padding left
* - in property <length> dialog-details-padding-right: Dialog details padding right
* - in property <PaddingType> padding-type: Dialog padding type
* - in property <ShadowType> shadow-type: Dialog shadow type
* - in property <BorderType> border-type : Dialog border type
* - in property <length> viewport-height : Dialog viewport height
* - in property <length> viewport-width : Dialog viewport width
* - in property <LayoutAlignment> dialog-details-alignment: Dialog details alignment
* ## functions
* - public function open() : open dialog
* - public function close() : close dialog
* ## callbacks
* - callback confirm() : run after confirm button click
* - callback cancel() : run after cancel button click
* ============================================
*/

import { SCard } from "../card/index.slint";
import {ROOT_STYLES,DefaultSDialogProps} from "../../themes/index.slint";
import { SText } from "../text/index.slint";
import { SButton } from "../button/index.slint";
import { ScrollView } from "std-widgets.slint";
import { Themes,PaddingType,PaddingProps,ShadowType,BorderType,BorderProps,UseSurrealismFn } from "../../use/index.slint";

export component Dialog inherits Window {
    height: 100%;
    width: 100%;
    padding: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    always-on-top: true;
    opacity: 1;
    visible: is-show;
    z: 1000;
    //theme
    in property <Themes> theme: DefaultSDialogProps.theme;
    in property <Themes> cancel-btn-theme: DefaultSDialogProps.cancel-btn-theme;
    in property <Themes> confirm-btn-theme: DefaultSDialogProps.confirm-btn-theme;
    in property <string> cancel-btn-text: DefaultSDialogProps.cancel-btn-text;
    in property <string> confirm-btn-text: DefaultSDialogProps.confirm-btn-text;
    in-out property <bool> is-show: DefaultSDialogProps.is-show;
    in property <percent> mask-opacity: DefaultSDialogProps.mask-opacity;
    in property <length> spacing: DefaultSDialogProps.spacing;
    //font
    in property <int> font-weight: DefaultSDialogProps.font-weight;
    in property <length> font-size: DefaultSDialogProps.font-size;
    in property <brush> font-color: DefaultSDialogProps.font-color;
    in property <bool> font-italic: DefaultSDialogProps.font-italic;
    in property <string> font-family: DefaultSDialogProps.font-family;
    //dialog
    in property <Themes> dialog-theme: DefaultSDialogProps.dialog-theme;
    in property <string> dialog-title: DefaultSDialogProps.dialog-title;
    in property <length> dialog-title-size: DefaultSDialogProps.dialog-title-size;
    in property <TextWrap> dialog-title-wrap: DefaultSDialogProps.dialog-title-wrap;
    in-out property <TextOverflow> dialog-title-overflow: DefaultSDialogProps.dialog-title-overflow;
    in-out property <TextHorizontalAlignment> dialog-title-h-alignment: DefaultSDialogProps.dialog-title-h-alignment;
    in-out property <TextVerticalAlignment> dialog-title-v-alignment: DefaultSDialogProps.dialog-title-v-alignment;
    in property <string> dialog-details: DefaultSDialogProps.dialog-details;
    in property <float> dialog-height: DefaultSDialogProps.dialog-height;
    in property <float> dialog-title-height: DefaultSDialogProps.dialog-title-height;
    in property <float> dialog-view-height: DefaultSDialogProps.dialog-view-height;
    in property <float> btn-view-height: DefaultSDialogProps.btn-view-height;
    in property <float> dialog-width: DefaultSDialogProps.dialog-width;
    in property <length> dialog-details-padding-top:DefaultSDialogProps.dialog-details-padding-top;
    in property <length> dialog-details-padding-bottom:DefaultSDialogProps.dialog-details-padding-bottom;
    in property <length> dialog-details-padding-left:DefaultSDialogProps.dialog-details-padding-left;
    in property <length> dialog-details-padding-right:DefaultSDialogProps.dialog-details-padding-right;
    in property <PaddingType> padding-type:PaddingType.Normal;
    in property <ShadowType> shadow-type: ShadowType.Low1;
    in property <BorderType> border-type: BorderType.Normal;
    in-out property <length> viewport-height <=> detail-scroll-view.viewport-height;
    in-out property <length> viewport-width <=> detail-scroll-view.viewport-width;
    in-out property <bool> mask-close: false;
    in property <LayoutAlignment> dialog-details-alignment:DefaultSDialogProps.dialog-details-alignment;
    public function open() {
        self.is-show = true;
    }public function close() {
        self.is-show = false;
    }callback confirm();
    callback cancel();
    mask := SCard {
        z: 100;
        height: 100%;
        width: 100%;
        theme: root.theme;
        drop-shadow-blur: 0;
        drop-shadow-offset-x: 0;
        drop-shadow-offset-y: 0;
        opacity: root.mask-opacity;
    }

    area := TouchArea {
        z: 110;
        clicked => {
            if mask-close {
                root.close()
            }
        }
        TouchArea {
            height: dialog.height;
            width: dialog.width;
            dialog := SCard {
                z: 111;
                card-height: area.height * root.dialog-height;
                card-width: area.width * root.dialog-width;
                padding-type: root.padding-type;
                shadow-type: root.shadow-type;
                border-type: root.border-type;
                VerticalLayout {
                    alignment: space-between;
                    title-view := Rectangle {
                        height: parent.height * root.dialog-title-height;
                        width: 100%;
                        title := SText {
                            font-size: root.dialog-title-size;
                            font-weight: 700;
                            text: root.dialog-title;
                            font-italic: root.font-italic;
                            font-family: root.font-family;
                            theme: root.dialog-theme;
                            wrap: root.dialog-title-wrap;
                            overflow: root.dialog-title-overflow;
                            horizontal-alignment: root.dialog-title-h-alignment;
                            vertical-alignment: root.dialog-title-v-alignment;
                        }
                    }

                    details-view := Rectangle {
                        height: parent.height * root.dialog-view-height;
                        detail-scroll-view := ScrollView {
                            height: parent.height;
                            width: parent.width;
                            padding-top: root.dialog-details-padding-top;
                            padding-bottom: root.dialog-details-padding-bottom;
                            padding-left: root.dialog-details-padding-left;
                            padding-right: root.dialog-details-padding-right;
                            if root.dialog-details != "": details := SText {
                                text: root.dialog-details;
                                font-family: root.font-family;
                                font-weight: root.font-weight;
                                font-size: root.font-size;
                                font-italic: root.font-italic;
                                wrap: word-wrap;
                            }
                            @children
                        }
                    }

                    btn-view := HorizontalLayout {
                        spacing: UseSurrealismFn.get-space(parent.width);
                        height: parent.height * root.btn-view-height;
                        padding-left: dialog.padding-left;
                        padding-right: dialog.padding-right;
                        padding-top: dialog.padding-top;
                        padding-bottom: dialog.padding-bottom;
                        alignment: root.dialog-details-alignment;
                        Rectangle {
                            width: cancel-btn.width;
                            cancel-btn := SButton {
                                theme: root.cancel-btn-theme;
                                drop-shadow-blur: 0;
                                drop-shadow-offset-x: 0;
                                drop-shadow-offset-y: 0;
                                text: root.cancel-btn-text;
                                clicked => {
                                    root.cancel();
                                    root.close();
                                }
                            }
                        }

                        Rectangle {
                            width: confirm-btn.width;
                            confirm-btn := SButton {
                                theme: root.confirm-btn-theme;
                                drop-shadow-blur: 0;
                                drop-shadow-offset-x: 0;
                                drop-shadow-offset-y: 0;
                                text: root.confirm-btn-text;
                                clicked => {
                                    root.confirm();
                                    root.close();
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
